<template>
  <div>
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="req.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          req.pageIndex = 1
          getNodeJobs()
        "
      >
        关键字搜索
      </el-button>
      <el-button
        type="success"
        style="margin-left: 20px"
        size="small"
        @click="
          curNodeJob = {}
          addNodeJobVis = true
        "
      >
        添加
      </el-button>
    </div>
    <el-table
      style="overflow: auto"
      :data="res.Items"
      stripe
      border
      highlight-current-row
    >
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="节点" prop="NDTY_EnumTxt"></el-table-column>
      <el-table-column label="流程名" prop="FLOW_Name" />
      <el-table-column label="时限(天)" prop="NJ_TermDays">
        <template slot-scope="scope">{{ scope.row.NJ_TermDays }}天</template>
      </el-table-column>
      <el-table-column label="备注" prop="NJ_Remark"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="
              curNodeJob = scope.row
              editNodeJobVis = true
            "
            icon="el-icon-edit"
          ></el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteNodeJob(scope.row.NJ_ID)"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; height: 40px">
      <el-pagination
        layout="total,prev,pager,next,sizes"
        style="float: right"
        background
        :current-page.sync="req.pageIndex"
        :total="res.Total"
        :page-size="req.pageSize"
        :page-sizes="[10, 15, 20]"
        @size-change="
          (val) => {
            req.pageSize = val
            getNodeJobs()
          }
        "
        @current-change="getNodeJobs()"
      ></el-pagination>
    </div>
    <el-drawer title="新增" :visible.sync="addNodeJobVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        v-if="curNodeJob"
      >
        <el-form-item label="节点类型">
          <el-select filterable v-model="curNodeJob.NJ_NodeTypeID">
            <el-option
              v-for="(item, index) in nodeTypes"
              :key="index"
              :label="item.NDTY_EnumTxt"
              :value="item.NDTY_EnumValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务流程">
          <el-select filterable v-model="curNodeJob.NJ_FlowID">
            <el-option
              v-for="(item, index) in flows"
              :key="index"
              :label="item.BF_Name + '_' + item.FLOW_Name"
              :value="item.FLOW_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时限天数">
          <el-input-number
            v-model="curNodeJob.NJ_TermDays"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="curNodeJob.NJ_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addNodeJob()">新增</el-button>
          <el-button type="text" @click="addNodeJobVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="编辑" :visible.sync="editNodeJobVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        v-if="curNodeJob"
      >
        <el-form-item label="节点类型">
          <el-select filterable v-model="curNodeJob.NJ_NodeTypeID">
            <el-option
              v-for="(item, index) in nodeTypes"
              :key="index"
              :label="item.NDTY_EnumTxt"
              :value="item.NDTY_EnumValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务流程">
          <el-select filterable v-model="curNodeJob.NJ_FlowID">
            <el-option
              v-for="(item, index) in flows"
              :key="index"
              :label="item.BF_Name + '_' + item.FLOW_Name"
              :value="item.FLOW_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时限天数">
          <el-input-number
            v-model="curNodeJob.NJ_TermDays"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="curNodeJob.NJ_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="editNodeJob()">保存</el-button>
          <el-button type="text" @click="editNodeJobVis = false">
            取消
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  getNodeTypes,
  getFlows,
  getNodeJobs,
  addNodeJob,
  editNodeJob,
  deleteNodeJob,
} from '@/api/core/nodeJob'
export default {
  data: function () {
    return {
      nodeTypes: [],
      flows: [],
      curNodeJob: null,
      req: {
        keyword: '',
        pageIndex: 1,
        pageSize: 10,
      },
      res: {
        Items: [],
        Total: 0,
      },
      addNodeJobVis: false,
      editNodeJobVis: false,
    }
  },
  methods: {
    addNodeJob() {
      addNodeJob(this.curNodeJob).then(() => {
        this.getNodeJobs()
      })
    },
    editNodeJob() {
      editNodeJob(this.curNodeJob).then(() => {
        this.getNodeJobs()
      })
    },
    deleteNodeJob(id) {
      this.$confirm(`是否删除该任务？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteNodeJob(id).then(() => {
          this.getNodeJobs()
        })
      })
    },
    getFlows() {
      getFlows().then(({ data }) => {
        this.flows = data
      })
    },
    getNodeTypes() {
      getNodeTypes().then(({ data }) => {
        this.nodeTypes = data
      })
    },
    getNodeJobs() {
      getNodeJobs().then(({ data }) => {
        this.res = data
      })
    },
  },
  created: function () {
    this.getNodeJobs()
    this.getFlows()
    this.getNodeTypes()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
</style>
